<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div style="float:left; width:160px;">
            <h2>用户列表</h2>
            <ul>
                <!-- index 作为第二个参数，用以标识下标-->
                <li v-for="(user,index)  in users">
                    用户{{ index+1 }}
                    <!-- <ul>
                        <li v-for="(value,key) of user" >{{ key }}:&nbsp;{{value}}</li>
                    </ul> -->
                </li>
               
            </ul>
        </div>

        <!-- <div style="margin-left:160px; overflow:hidden;">
            <h2>用户列表</h2>
            <ul>
                <uIndex 作为第二个参数，用以标识下标 -->
                <!-- <li v-for="(user,uIndex)  of users">{{ uIndex }}.&nbsp;{{user.city}}</li> -->
            </ul>
        </div> 
    </div>
    <script language="javaScript" src="../JS文件/vue.js"></script>
    <script>
        let vm = new Vue({

            el:'#app',
            data () {
                return {
                    users:[
                   {
                        name:'Clark',
                        age:27,
                        city:'Chicago'
                    },
                    {
                        name:'Jackson',
                        age:28,
                        city:'Sydney'
                    }

                    ]
                }
                    
                
                  
                
            }
        })
    </script>
</body>
</html>